<style lang="less">
//导航
page{
	background: #f6f6f6;
	padding-bottom: 120upx;
}
  .container{
  }
	.main{
		width: 100%;
	}
  .main-top{
    padding: 10upx 30upx;
	margin-top: 20upx;
	background: #FFFFFF;
  }
	.main_detailText{
		padding: 20upx 30upx;
	}
	.title{
		display: block;
		width: 100%;
		color:rgba(51,51,51,1);
    font-size:32upx;
    font-weight:bold;
	}
	.detailText{
		display: block;
		width: 100%;
		font-size: 26upx;
		line-height: 40upx;
		margin-top: 40upx;
		font-size:32upx;
		font-weight:500;
		height: 200upx;
		min-height: 200upx;
		line-height: 42upx;
		color:#333333;
	}
	.shangchuan_tp{
		margin-top: 10upx;
	}
	.main_list_fl{
		width: 200upx;
		max-height: 220upx;
	}
	.shangchuan{
		overflow: hidden;
    .shangchuan_list{
      float: left;
      width: 28%;
      height: 200upx;
      max-height: 200upx;
      margin: 15upx 2% 0;
      display: flex;
      align-items:center;
      border-radius: 4upx;
      position: relative;
      overflow: hidden;
      .list_image{
      	// float: left;
      	width: 100%;
        height: auto;
      }
      .deleteImg{
        position: absolute;
        right: 0;
        top: 0;
        width: 30upx;
        height: auto;
      }
    }
	}
	.tianjia{
		margin-top: 20upx;
		font-size:30upx;
		color: #ff0036;
	}
    .delete{
    	float: right;
    	color: #ffffff;
    	background: rgba(7,5,6,1);
    	padding: 10upx 15upx;
    	font-size: 24upx;
    	border-radius: 8upx;
	}
  .check-box {
    display: flex;
    justify-content: space-between;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 98upx;
    background:rgba(7,5,6,1);
    z-index: 999;
    .pay-btn {
      width: 100%;
      text-align: center;
      background:rgba(7,5,6,1);
      color: #ffffff;
  	line-height: 98upx;
      font-size: 30upx;
    }
  }
  .placeholder{
	font-size:32upx;
	font-weight:bold;
	color:rgba(221,221,221,1);
	line-height:41upx;
  }
  .renshu{
	  color:rgba(221,221,221,1);
  }
  .huodTime{
	  color:rgba(51,51,51,1);
	  padding: 20upx 0;
	  font-size:28upx;
	  color:rgba(51,51,51,1);
	  line-height:34upx;
	  background: url('https://xpandago.oss-cn-shanghai.aliyuncs.com/wechat/arrow-right%402x.png') no-repeat right center;
	  background-size: 36upx;
  }
  .tip{
	  font-size:26upx;
	  color:rgba(153,153,153,1);
	  line-height:41upx;
  }
  .renshuInput{
	  display: block;
	  padding: 20upx 0;
	  border-top: 1upx solid #ededed;
	  font-size:28upx;
	  color:rgba(51,51,51,1);
	  line-height:34upx;
  }
  .mony{
	  overflow: hidden;
	  margin-top: 10upx;
	  text{
		  font-size:60upx;
		  font-family:'DINCond';
		  font-weight:400;
		  color:rgba(51,51,51,1);
		  line-height:72upx;
		  float: left;
	  }
	  .jinrInput{
		  float: left;
		  font-size:46upx;
		  font-family:'DINCond';
		  line-height:55upx;
		  margin-left: 20upx;
		  color:rgba(51,51,51,1);
	  }
	  .jinr{
		 color:rgba(221,221,221,1); 
	  }
  }
</style>
<template>
	<view class="container">
		<view class="main">
			<view class="main_detailText main-top">
				<input name="" type="text" class="title" @input="titleTop" maxlength="30" value="" placeholder="请输入活动标题名称" />
				<textarea class="detailText" @input="centent" placeholder="请填写活动内容，可以上传活动现场图片哦~" placeholder-class="placeholder" maxlength="1000"/>
				<view class="shangchuan">
				  <view v-for="(image,index) in imageList" :key="index" class="shangchuan_list">
				    <image :src="image" mode="widthFix" :data-src="image" :data-index = 'index' class ="list_image" ></image>
				    <image src="https://xpandago.oss-cn-shanghai.aliyuncs.com/applet/delete_images.png" :data-index = 'index' data-stale="1" mode="widthFix" class="deleteImg" @tap.stop="deleteImg"></image>
				  </view>
				</view>
				<view class="shangchuan_tp">
				  <image src="https://xpandago.oss-cn-shanghai.aliyuncs.com/wechat/images/add_picbox%402x.png" class="main_list_fl" mode="widthFix" @tap="chooseImage1"></image>
				</view>
			</view>
			<view class="main-top pz">
				<view class="title">上传凭证</view>
				<view class="shangchuan">
				  <view v-for="(image,index) in imageListOne" :key="index" class="shangchuan_list">
				    <image :src="image" mode="widthFix" :data-src="image" :data-index = 'index' class ="list_image" ></image>
				    <image src="https://xpandago.oss-cn-shanghai.aliyuncs.com/applet/delete_images.png" :data-index = 'index' data-stale="2" mode="widthFix" class="deleteImg" @tap.stop="deleteImg"></image>
				  </view>
				</view>
				<view class="shangchuan_tp">
				  <image src="https://xpandago.oss-cn-shanghai.aliyuncs.com/wechat/images/add_picbox%402x.png" class="main_list_fl" mode="widthFix" @tap="chooseImage"></image>
				</view>
				<view class="tip">请上传活动的消费单据、小票、发票等凭证</view>
			</view>
			<view class="main-top">
				<!-- <view class="huodTime"></view> -->
				<view class="huodTime" :class="{'active':index==tabIndex}" @tap="toggleTab(item,index)" v-for="(item,index) in tabList" :key="index">{{item.name}}</view>
				<w-picker 
				    mode="date" 
				    startYear="2019" 
				    endYear="2030"
				    :defaultVal="[0,0,0]" 
				    :current="true"
				    @confirm="onConfirm" 
				    ref="date" 
				    themeColor="#f00">
				</w-picker>
				<input name="" type="text" class="renshuInput" @input="site" maxlength="30" value="" placeholder="请输入活动地点" placeholder-class="renshu" />
				<input name="" type="number" class="renshuInput" @input="people" maxlength="10" value="" placeholder="请输入参与人数" placeholder-class="renshu" />
			</view>
			<view class="main-top">
				<view class="title">申请金额</view>
				<view class="mony">
					<text>¥</text>
					<input name="" type="number" class="jinrInput" @input="money" maxlength="10" value="" placeholder="请输入申请金额" placeholder-class="jinr" />
				</view>
			</view>
		</view>
	  <view class="check-box">
	    <view class="pay-btn" @tap="publish">
	    	提交申请
	    </view>
	  </view>
	</view>
</template>

<script>
	import api from '@/common/api'
	import { pathToBase64, base64ToPath } from '@/common/js/index.js'
	// import segmentedControl from '@/components/segmented-control';
	import wPicker from "@/components/w-picker/w-picker.vue";
	import OSSUtil from '@/common/libs/ossUtil.js'
	// var sourceType = [
	// 	['camera'], //拍照
	// 	['album'], //相册
	// 	['camera', 'album'] //拍照或相册
	// ]
	// var sizeType = [
	// 	['compressed'], //压缩
	// 	['original'], //原图
	// 	['compressed', 'original'] //压缩或原图
	// ]
	export default {
		components: {
			// segmentedControl,
			wPicker
		},
		data() {
			return {
				imageList:[],//图片数组
				imgs:[],
				imageListOne:[],//凭证数组
				imgsOne:[],//
				temp_txst_list:[],
				titleAdd:'',//输入标题
				cententAdd:'',//输入内容
				siteAdd:'',//输入地点
				peopleAdd:'',//输入人数
				moneyAdd:'',//输入金额
				timeAdd:'',//获取时间
				inviteGoodsLists:[],
				deleteShow:false,//是否显示删除
				http:'https://static.xpandago.net/',//图片前缀
				mode:"date",
				defaultVal:[0,0,0,0,0,0,0],
				tabList:[{
					mode:"date",
					name:"请选择活动时间"
				}],
				tabIndex:0,
			}
		},
		onLoad() {
			// this.getPolicy()
		},
		methods: {
			async allowancePreserve(){
				const token=uni.getStorageSync('token')
				const [err, res] = await api.allowancePreserve({
					query: {
					  address:this.siteAdd,
					  amount : this.moneyAdd,
					  content:this.cententAdd,
					  contentPicList:this.imgs,
					  peopleNum:this.peopleAdd,
					  time:this.timeAdd,
					  title:this.titleAdd,
					  voucherPicList:this.imgsOne
					 },
					 header:{
						'Content-Type': 'application/x-www-form-urlencoded',
						'token': token
					 },
					 method:'POST'
				 });
				 console.log(res)
				 if(res.data.code == 0){
					 uni.showToast({
					 	title: res.data.msg,
					 	icon: 'none'
					 })
					 setTimeout(function () {
					  uni.navigateBack()
					 }, 500) 
				 }else{
					 uni.showToast({
					 	title: res.data.msg,
					 	icon: 'none'
					 })
				 }
			},
			async getPolicy(){
				const [err, res] = await api.getPolicy({
				 });
				 console.log(res)
				 if(res.data.code == 0){
					 this.policy=res.data.data
				 }else{
					 uni.showToast({
					 	title: res.data.msg,
					 	icon: 'none'
					 })
				 }
			},
			//上传活动照片
			async chooseImage1() {
				var imgLen=this.imageList.length;
				if(imgLen>8){
					 uni: uni.showToast({
						title: '活动图片最多9张',
						icon: 'none'
					});
					return false;
				}
			    let files = await OSSUtil.getImage(imgLen); // 选择图片
			    let sign = await OSSUtil.get_STS() // 获取签名等信息
			
			    let imageSrc = files.tempFilePaths;
				this.imageList = [...this.imageList, ...imageSrc];
				for (var i = 0; i < imageSrc.length; i++) {
					let fileName = OSSUtil.getFileName(imageSrc[i]); // 自定义上传后的文件名称
					console.log('ss',fileName)
					let uploadTask = uni.uploadFile({
					    url: sign.host,
					    fileType: 'image',
					    formData: {
					        'key': fileName,
					        'policy': sign.policy,
					        'OSSAccessKeyId': sign.accessId,
					        'signature': sign.signature,
					        //让服务端返回200,不然，默认会返回204
					        'success_action_status': '200',
					    },
						name: 'file',
						filePath: imageSrc[i],
					    success: (res) => {
					        console.log('uploadImage success, res is:', res)
					        uni.showToast({
					            title: '上传成功',
					            icon: 'success',
					            duration: 1000
					        });
							// this.imageList.push(imageSrc[i])
							this.imgs.push(fileName)
					    },
					    fail: (err) => {
					        console.log('uploadImage fail', err);
					        uni.showModal({
					            content: err.errMsg,
					            showCancel: false
					        });
					    }
					});
				}
			    
			    // uploadTask.onProgressUpdate((res) => {
			    //     console.log("上传进度" + res.progress);
			    //     this.progress = res.progress;
			    // });
			
			    // this.$emit('imgUploaded', {data: files.tempFilePaths[0], authId: this.authId});
			},
			//上传凭证
			chooseImage: async function() {
				var imgLen=this.imageListOne.length;
				if(imgLen>8){
					 uni: uni.showToast({
						title: '凭证图片最多9张',
						icon: 'none'
					});
					return false;
				}
				let files = await OSSUtil.getImage(imgLen); // 选择图片
				let sign = await OSSUtil.get_STS() // 获取签名等信息
				
				let imageSrc = files.tempFilePaths;
				this.imageListOne = [...this.imageListOne, ...imageSrc];	
				for (var i = 0; i < imageSrc.length; i++) {
					let fileName = OSSUtil.getFileName(imageSrc[i]); // 自定义上传后的文件名称
					let uploadTask = uni.uploadFile({
					    url: sign.host,
					    fileType: 'image',
					    formData: {
					        'key': fileName,
					        'policy': sign.policy,
					        'OSSAccessKeyId': sign.accessId,
					        'signature': sign.signature,
					        //让服务端返回200,不然，默认会返回204
					        'success_action_status': '200',
					    },
						name: 'file',
						filePath: imageSrc[i],
					    success: (res) => {
					        console.log('uploadImage success, res is:', res)
					        uni.showToast({
					            title: '上传成功',
					            icon: 'success',
					            duration: 1000
					        });
							// this.imageListOne.push(imageSrc)
							this.imgsOne.push(fileName)
					    },
					    fail: (err) => {
					        console.log('uploadImage fail', err);
					        uni.showModal({
					            content: err.errMsg,
					            showCancel: false
					        });
					    }
					});
				}
			},
			// deleteHide(){
			//    if(this.deleteShow==true){
			//    this.deleteShow=false
			//   }else{
			//     this.deleteShow=true
			//   }
			// },
			deleteImg (e) {
			  let index=e.currentTarget.dataset.index;
			  let stale=e.currentTarget.dataset.stale;
			  if(stale==1){
				  this.imageList.splice(index,1);
				  this.imgs.splice(index,1);
			  }else if(stale==2){
				  this.imageListOne.splice(index,1);
				  this.imgsOne.splice(index,1);
			  }
			},
			//选择日期
			toggleTab(item,index){
				this.tabIndex=index;
				this.mode=item.mode;
				this.defaultVal=item.value;
				this.$refs[item.mode].show();
			},
			//组件选择返回的参数
			onConfirm(val){
				// this.resultInfo=val;
				let checkArr=val.checkArr
				let time=checkArr.join('-')
				this.tabList[0].name=time;
				this.timeAdd=time;
			},
			//获取标题
			titleTop(e){
				this.titleAdd = e.detail.value;
				console.log('标题',this.titleAdd)
			},
			//获取内容
			centent(e){
				this.cententAdd = e.detail.value;
				console.log('内容',this.cententAdd)
			},
			//获取地点
			site(e){
				this.siteAdd = e.detail.value;
				console.log('地点',this.siteAdd)
			},
			//获取人数
			people(e){
				this.peopleAdd = e.detail.value;
				console.log('人数',this.peopleAdd)
			},
			//获取金额
			money(e){
				this.moneyAdd = e.detail.value;
				console.log('金额',this.moneyAdd)
			},
			//提交申请
			publish(){
				let reg =/^[0-9]*$/ //只能输入数字
				let regs=/^[0-9]+(.[0-9]{2})?$/ //只能输入数字并保留两位小数
				let str=this.peopleAdd
				let strs=this.moneyAdd
				if(this.titleAdd=='' && this.titleAdd.length==0){
					uni: uni.showToast({
				     title: '活动标题不能为空！',
				     icon: 'none'
				   })
				   return false;
				 }
				 if(this.cententAdd=='' && this.cententAdd.length==0){
					uni: uni.showToast({
					  title: '活动内容不能为空！',
					  icon: 'none'
					})
					return false;
				  }
				  if(this.imgs=='' && this.imgs.length==0){
				  	uni: uni.showToast({
				       title: '活动图片不能为空！',
				       icon: 'none'
				     })
				     return false;
				   }
				   if(this.imgsOne=='' && this.imgsOne.length==0){
				   	uni: uni.showToast({
				        title: '活动凭证图片不能为空！',
				        icon: 'none'
				      })
				      return false;
				    }
					if(this.timeAdd=='' && this.timeAdd.length==0){
						uni: uni.showToast({
					     title: '活动时间不能为空！',
					     icon: 'none'
					   })
					   return false;
					 }
					if(this.siteAdd=='' && this.siteAdd.length==0){
					 	uni: uni.showToast({
					      title: '活动地点不能为空！',
					      icon: 'none'
					    })
					    return false;
					}
					if(this.peopleAdd=='' && this.peopleAdd.length==0){
					  	uni: uni.showToast({
					       title: '活动人数不能为空！',
					       icon: 'none'
					     })
					     return false;
					}
					if(!reg.test(str)){
						uni: uni.showToast({
						   title: '请输入正确的活动人数！',
						   icon: 'none'
						 })
						 return false;	
					}
					if(this.moneyAdd=='' && this.moneyAdd.length==0){
					   	uni: uni.showToast({
					        title: '请输入申请金额！',
					        icon: 'none'
					      })
					      return false;
					}
					if(!regs.test(strs)){
						uni: uni.showToast({
						   title: '请输入正确的申请金额最多保留两位小数！',
						   icon: 'none'
						 })
						 return false;	
					}
					this.allowancePreserve()
			}
		}
	}
</script>
